// 教学版 全注释用样式
/**
 * 全局样式重置
 * 此样式块用于重置所有元素的默认外边距和内边距，确保所有元素在不同浏览器中的初始样式一致。
 * 同时，设置全局字体为 'Open Sans'，如果该字体不可用，则使用系统默认的 sans-serif 字体。
 */
* {
    /* 将所有元素的外边距设置为 0 */
    margin: 0;
    /* 将所有元素的内边距设置为 0 */
    padding: 0;
    font-family: 'Open Sans', 'sans-serif';
}

/**
 * 文档根元素样式
 * 此样式块用于配置文档的根元素（:root），设置背景渐变和动画效果。
 */
:root {
    /* 背景渐变色 - 从 -45 度方向开始，使用四种颜色渐变*/
    background: linear-gradient(-45deg, #abaf81, #8e3a7d, #469ebe, #23d5ab);
    /* 背景尺寸 - 设置为 600% 600%，用于实现动画效果 */
    background-size: 600% 600%;
    /* 循环动画 - 设置应用名为 gradientBG 的动画，持续时间为 10 秒，缓动效果为 ease，无限循环 */
    animation: gradientBG 10s ease infinite;
}

/* gradientBG 动画，控制背景 background-position */
@keyframes gradientBG {

    // 动画开始时的状态，背景位置为水平 0%，垂直 50%
    0% {
        background-position: 0% 50%;
    }

    // 动画进行到一半时的状态，背景位置为水平 100%，垂直 50%
    50% {
        background-position: 100% 50%;
    }

    // 动画结束时的状态，背景位置回到水平 0%，垂直 50%
    100% {
        background-position: 0% 50%;
    }
}


/**
 * 主容器布局样式
 * 此样式块用于设置主容器的布局，将其宽度设置为 1280px，并使其在水平方向上居中显示。
 * 使用 CSS Grid 布局将容器划分为两列，列宽比例为 1:5，列之间的间距为 10px。
 */
.wrapper {
    width: 1280px;
    margin: 0 auto;
    display: grid;
    /* 划分两列，1:3 列宽 */
    grid-template-columns: 1fr 5fr;
    grid-gap: 10px;
}

/**
 * .wrapper 下所有子元素的样式
 * 此样式块为 .wrapper 下的所有子元素设置统一的背景颜色、文字颜色、边框圆角和内边距。
 */
.wrapper>* {
    background-color: rgba(43, 43, 44, 0.45);
    color: #fff;
    border-radius: 6px;
    padding: 20px;
}

/**
 * 页眉和页脚布局样式
 * 此样式块用于设置页眉和页脚的布局，使其跨越所有列。
 * 同时，为页眉和页脚设置不同的字体大小。
 */
.header,
.footer {
    grid-column: 1 / -1;
    font-size: 150%;
}

/**
 * 页脚样式
 * 此样式块用于单独设置页脚的字体大小为 100%。
 */
.footer {
    /* 设置页脚的字体大小为 100% */
    font-size: 100%;
}


/**
 * 侧边栏样式
 * 此样式块用于设置侧边栏的列表样式和链接样式。
 * 包括列表项的背景颜色、边框圆角，以及链接的字体粗细、颜色和激活状态样式。
 */
.sidebar li {
    list-style: none;
    margin: 10px auto;
    padding: 13px 5px;
    background-color: #0000002d;
    border-radius: 6px;

    a {
        font-weight: 500;
        color: #fff;
    }

    a.router-link-exact-active {
        color: #55b881;
        font-weight: 800;
        padding-bottom: 10px;
        border-bottom: #55b881 4px solid;
    }
}

/* 按钮、输入框样式 */
button,
input[type="file"] {
    border: 2px #55b881 solid;
    border-radius: 6px;
    background: #55b881;
    color: white;
    font-weight: 600;

}

.width-145 {
    width: 145px;
}

input[type="input"] {
    outline-style: none;
    border: #55b881 1px solid;
    border-radius: 6px;
    padding: 8px;
}

input[type="checkbox"] {
    color: #55b881;
}

/* 内容区*/
.page {
    margin: 10px auto;
    height: 520px;
    background-color: rgba(17, 4, 50, 0.1);
    border-radius: 6px;
    display: grid;
    grid-template-columns: 200px 5fr;
    grid-gap: 10px;
    justify-items: center;
    align-items: center;

    .page_option {
        button {
            margin-top: 20px;
        }

        div {
            margin: 20px;
            color: #000;
            font-weight: 800;
        }

        .draw_target {
            position: relative;
            // 居中
            left: 5px;

            >* {
                width: 145px;
            }

            #page_draw-img-target {
                border-radius: 6px;
                border: 2px #55b882a4 solid;
            }

            #page_draw-canvas-target {
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }

    .page_draw {
        position: relative;

        video {
            border-radius: 6px;
        }

    }

    /* 人脸识别：视频 */
    #page_draw-video {
        max-width: 720px;
        max-height: 480px;
    }

    #page_draw-canvas-video {
        position: absolute;
        top: 0;
        left: 0px;
        max-width: 720px;
        max-height: 480px;
    }
}

.page_chart {
    display: grid;
    grid-template-columns: 4fr 2fr;
    grid-gap: 10px;

    /* 聊天窗口样式 */
    .chat-window {
        height: 440px;
        background-color: rgba(17, 4, 50, 0.1);
        border-radius: 6px;
        padding: 10px;
        font-size: 60%;
    }

    .canva-window {
        height: 460px;
        background-color: rgba(17, 4, 50, 0.1);
        border-radius: 6px;

    }

    .page_talk_item {
        grid-column: 1 / -1;
        display: flex;
        .talk_btn {
            margin-top: 20px;
            margin-bottom: 2px;
            margin-right: 10px;
            background: #222222;
            font-size: 60%;
        }
    }
}